<template>
  <div class='hall' style="margin-top:150px">
    <!-- <div class="halltop">
        <img style="width:100%;" src="https://s1.ax1x.com/2022/08/08/vMcvjK.jpg" alt="">
    </div> -->
    <div class="hallimg">
      <div class="swiperVideo">
        <!-- <h1>展厅视频</h1>
        <p>VIDEO</p> -->
        <title-bar class="animate__animated wowlive animate__fadeInDown" eTitle='VIDEO丨金巢'></title-bar>
        <SwiperVideo></SwiperVideo>
      </div>
      <div class="swiperImg">
        <div class="block">
          <el-carousel trigger="click" height="550px" >
            <el-carousel-item v-for="item in swiperImg" :key="item">
              <img :src="item" style="width:100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="firstx">
        <!-- <h1 style="color:#222222">展厅一角</h1>
        <p style="color:#222222">PAVILION</p> -->
        <div style="margin:80px 0">
          <title-bar class="animate__animated wowlive animate__fadeInDown" eTitle='CORNER丨展厅一角'></title-bar>
        </div>
        <div class="firstx_img animate__animated wowlive animate__fadeInUp ">
          <div v-for="(item,index) in zhanList" :key="index" :class="index == 0 || index == 2 || index == 1 ?'firstimg':''">
            <!-- <img class="halloneimg" :src="item" alt=""> -->
            <Float 
                :imgUrl="item"
                :Xsize="40"
                :Ysize="16"
            ></Float>
            <img class="firstx_sou" src="http://www.fordcasa.com/bocstatic/web/img/search-ico2.png?v=v3" alt="">
          </div>
        </div>
      </div>
      <btm></btm>
      <!-- <el-tabs v-model="activeName" :before-leave="beforeLeave" @tab-click="handleClick" type="border-card">
          <el-tab-pane label="展厅图片" name="first">
              <div class="hallfirst">
                  <div class="first_one">
                      <h1>展厅</h1>
                      <p>PAVILION</p>
                      <div class="comhall">
                          <div class="swiper-container hall-swiper">
                              <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in hallImgList" :key="index">
                                    <img :src="item" alt="" />
                                </div>
                              </div>
                              <div class="swiper-button-prev"></div>
                              <div class="swiper-button-next"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="firstx">
                <h1>展厅一角</h1>
                <p>PAVILION</p>
                <div class="firstx_img animate__animated wowlive animate__fadeInUp ">
                  <div v-for="(item,index) in zhanList" :key="index" :class="index == 0 || index == 2 ?'firstimg':''">
                    <img class="halloneimg" :src="item" alt="">
                    <img class="firstx_sou" src="http://www.fordcasa.com/bocstatic/web/img/search-ico2.png?v=v3" alt="">
                  </div>
                </div>
              </div>
              <div class="hallbottom">
                Copyright © 2020 金巢灯饰. All rights reserved. 浙ICP备14042425号-1 技术支持：陌上花开 浙公网安备：33010802005203号  网站建设 陌上花开 法律声明
              </div>
          </el-tab-pane>
          <el-tab-pane label="展厅视频" name="second">
              <div class="second_two">
                  <h1>视频</h1>
                  <p>video</p>
                  <div class="sectwox animate__animated wowlive animate__fadeInUp" v-for="(item,index) in videoList" :key="index">
                    <div class="sectwo_left">
                      <img class="img1" :src="item.img" alt="">
                      <img class="img2" src="http://www.fordcasa.com/bocstatic/web/img/play-ico1.png?v=v3" alt="">
                    </div>
                    <div class="sectwo_right">
                      <div class="sectitle"><span>VIDEO</span></div>
                      <div class="secon">
                        <div><span class="secon-span1">{{item.year}}</span><span class="secon-span2"> / {{item.title}}</span></div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="hallbottom">
                Copyright © 2020 金巢灯饰. All rights reserved. 浙ICP备14042425号-1 技术支持：陌上花开 浙公网安备：33010802005203号  网站建设 陌上花开 法律声明
              </div>
          </el-tab-pane>
      </el-tabs> -->
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import SwiperVideo from '@/components/swiperVideo.vue';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    SwiperVideo
  },
  data () {
  // 这里存放数据
    return {
        hallSwiper:'',
        activeName:'first',
        hallImgList:[
        'https://s1.ax1x.com/2022/08/08/vMcJTH.png',
        'https://s1.ax1x.com/2022/08/08/vMcG0e.jpg',
        'https://s1.ax1x.com/2022/08/08/vMcNtA.jpg',
      ],//展示图片 数组
      zhanList:[
        "https://s1.ax1x.com/2022/08/08/vMcBX8.jpg",
        "https://s1.ax1x.com/2022/08/08/vMcWpq.jpg",
        "https://s1.ax1x.com/2022/08/08/vMcrnS.jpg",
      ],
      swiperImg:[
        'https://s1.ax1x.com/2022/08/08/vMcJTH.png',
        'https://s1.ax1x.com/2022/08/08/vMcG0e.jpg',
        'https://s1.ax1x.com/2022/08/08/vMcNtA.jpg',
      ]
      // videoList:[
      //   {
      //     img:'http://www.fordcasa.com/bocupload/2022/07/28/1658996517515413mxf.jpg',
      //     year:'2022/07/28',
      //     title:'艺术家居馆'
      //   },
      //   {
      //     img:'	http://www.fordcasa.com/bocupload/2020/04/25/15877873092349ro1sf.jpg',
      //     year:'2022/08/1',
      //     title:'最美展厅'
      //   }
      // ],
      // 展厅图片数组

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  // methods: {
  //   handleClick(){
  //     if(this.activeName == 'second'){
  //       this.hallSwiper.destroy(false)
  //       // console.log(this.hallSwiper);
  //     }else if(this.activeName == 'first'){
  //        // 实例banner轮播
  //       this.hallSwiper = new this.$swiper(".hall-swiper", {
  //         mousewheel: true,
  //         loop: true, // 循环模式选项
  //         speed: 1000,
  //         observer:true,//修改swiper自己或子元素时，自动初始化swiper
  //         observeParents:true,//修改swiper的父元素时，自动初始化swiper
  //         autoplay: {
  //           delay: 3500,
  //           disableOnInteraction: false,
  //         },
  //         // 如果需要前进后退按钮
  //         navigation: {
  //           nextEl: ".swiper-button-next",
  //           prevEl: ".swiper-button-prev",
  //           // clickable: true
  //         },
  //         on:{
  //           destroy: function(){
  //             // alert('你销毁了Swiper;');
  //           },
  //         },
  //       });
  //     }
  //   },
  //   beforeLeave(activeName, oldActiveName){
  //     // console.log(activeName, oldActiveName);
  //   }
  // },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.$nextTick(() => {
        new this.$wow({ boxClass: "wowlive" }).init();
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  // mounted () {
  //   window.scrollTo(0,0);
  //   // 实例banner轮播
  //   this.hallSwiper = new this.$swiper(".hall-swiper", {
  //     mousewheel: true,
  //     loop: true, // 循环模式选项
  //     speed: 1000,
  //     observer:true,//修改swiper自己或子元素时，自动初始化swiper
  //     observeParents:true,//修改swiper的父元素时，自动初始化swiper
  //     autoplay: {
  //       delay: 3500,
  //       disableOnInteraction: false,
  //     },
  //     // 如果需要前进后退按钮
  //     navigation: {
  //       nextEl: ".swiper-button-next",
  //       prevEl: ".swiper-button-prev",
  //       // clickable: true
  //     },
  //     on:{
  //       destroy: function(){
  //         // alert('你销毁了Swiper;');
  //       },
  //     },
  //   });
  // },halltop
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import '@/assets/style/comm.scss';

.first_one,.second_two{
    padding: 50px 100px;
    color: white;
    p{
        color: white;
        font-weight: bold;
    }
}

.sectwox{
  width: 100%;
  display: flex;
  margin-top: 30px;
  .sectwo_left{
    margin-top: 20px;
    width: 70%;
    position: relative;
    box-shadow: 0 0 80px rgb(182 181 172 / 80%);
    .img1{
      width: 100%;
      height: 100%;
    }
    .img2{
      width: 72px;
      height: 72px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }
  }
  .sectwo_right{
    width: 30%;
    padding: 0 0 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .sectitle{
      font-weight: bold;
      position: relative;
      span{
        margin-left: 50px;
      }
    }
    .sectitle::before{
      content: '';
      position: absolute;
      width: 45px;
      height: 1px;
      top: 50%;
      left: 0;
      background: rgba(255,255,255,0.2);
    }
    .secon{
      font-family: "DIN-Bold";
      font-weight: bold;
      .secon-span1{
        font-size: 18px;
      }
      .secon-span2{
        font-size: 26px;
      }
    }
  }
}
.firstx{
  padding: 40px 100px 0 100px;
  color: white;
  margin-bottom: -30px;
  p{
    color: white;
    font-weight: bold;
  }
  .firstx_img{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height:100%;
    margin-top: 30px;
    div{
      width:30%;
      margin-bottom: 5%;
      position: relative;
      img{
        width: 100%;
      }
      .firstx_sou{
        width: 31px;
        height: 31px;
        position: absolute;
        right: 2rem;
        bottom: 20px;
        cursor: pointer;
      }
    }

  }
}

.comhall {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 30px;
      .hall-swiper {
        .swiper-button-prev {
          width: 60px;
          position: absolute;
          bottom: 0%;
          left: 100%;
          background-color: #fff !important;
          border-right:1px solid #c3c3c4;
          background: url(http://www.fordcasa.com/bocstatic/web/img/swiper-l.png) no-repeat center center; 
          background-size: 15px 23px;
        }
        .swiper-button-next {
          width: 60px;
          position: absolute;
          bottom: 0%;
          left: 100%;
          background-color: #fff !important;
          // transform: translate(-60px, 228px);
          background: url(http://www.fordcasa.com/bocstatic/web/img/swiper-r.png) no-repeat center center;
          background-size: 15px 23px;
        }
        position: relative;
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
          transition: all linear 0.3s;
        //   cursor: pointer;
        }
      }
    }
.firstimg{
  ~.firstimg{
    margin-left: 5%;
  }
}
.hallbottom{
  border-top: 1.5px solid rgba(0,0,0,0.08);
  height: 50px;
  line-height: 80px;
  color:white;
  text-align: center;
}
.swiperVideo{
  width:100%;
  h1{
    margin-left:10%;
  }
  p{
    margin-left:10%;
  }
}
.swiperImg{
  width:80%;
  margin: 70px auto;
  margin-bottom: -50px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 1;
    line-height: 150px;
    margin: 0;
  }
  :deep(.el-carousel__button){
    width:20px;
    height:20px;
    border-radius: 50%;
  }
  :deep(.is-active){
    background-color: rgba(0,0,0,0) !important;
  }
</style>
